/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-23 14:38:38
 */
/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-23 14:38:38
 */
import { useSearch, useRequest } from '@/hooks'
import { clone, head, last } from 'ramda'
import { defineComponent, reactive, toRaw } from 'vue'
import { columns, MenuState, RoleState, rows } from './uilts'
import CreateIndex from './components/createIndex'

export default defineComponent({
	name: "Role",
	setup() {
		const pageState = reactive({
			visible: false,
			dataSource: {}
		})
		const { searchForm, expand, expandToggle } = useSearch<API.server.role.getRolePage.Params>({})
		function search() {
			const params = clone(toRaw(searchForm.value))
			if (params.createTimeStart && Array.isArray(params.createTimeStart)) {
				params.createTimeEnd = `${last(params.createTimeStart)} 23:59:59`
				params.createTimeStart = `${head(params.createTimeStart)} 00:00:00`
			}
			if (params.updateTimeStart && Array.isArray(params.updateTimeStart)) {
				params.createTimeEnd = `${last(params.updateTimeStart)} 23:59:59`
				params.updateTimeStart = `${head(params.updateTimeStart)} 00:00:00`
			}
			run({
				...params,
				...getPagination(true),
			})
		}
		function clear() {
			searchForm.value = {}
			search()
		}
		const { run, data, getPagination, renderPagination, loading } = useRequest(
			API.server.role.getRolePage.request,
			{
				manual: true,
				pagination: true,
			}
		)
		function actionRender({ record }: F.RableSlotScope<RoleState>) {
			return (
				<a-space size="middle">
					<a-button
						type="link"
						block
						onClick={() => {
							pageState.dataSource = clone(record)
							pageState.visible = true
						}}
					>
						编辑
					</a-button>
					{/* <a-button type="link" block danger >
						删除
					</a-button> */}
				</a-space>
			)
		}
		function tableHeader() {
			return [
				<a-button type="primary" onClick={() => {
					pageState.visible = true
					pageState.dataSource = {}
				}}>
					新增
				</a-button>,
			]
		}
		return () => (
			<div>
				<f-search
					labelCol={{ span: 6 }}
					wrapperCol={{ span: 18 }}
					loading={loading.value}
					clear={clear}
					search={search}
					expand={{
						value: expand.value,
						expandToggle,
					}}
					searchKey='roleSearchKey'
					model={searchForm.value}
					rows={rows}
				/>
				<f-table
					v-slots={{ header: tableHeader, actionRender }}
					columns={columns}
					dataSource={data.value.data?.data}
					loading={loading.value}
					rowKey="id"
					tableKey='roleTabl'
				/>
				{renderPagination()}
				<CreateIndex visible={pageState.visible} dataSource={pageState.dataSource} onCancel={() => {
					pageState.visible = false
					pageState.dataSource = {}
				}} onSearch={search} />
			</div>
		)
	}
})